#{extends 'Secure/layout.html' /}

<div id="login">
	
	<h1>&{'secure.title'}</h1>
		
	#{form @authenticate()}
		
		#{if flash.error}
			<p class="error">
				&{flash.error}
			</p>
		#{/if}
		#{if flash.success}
			<p class="success">
				&{flash.success}
			</p>
		#{/if}
	
		<p id="username-field">
			<label for="username">&{'secure.username'}</label>
			<input type="text" name="username" id="username" value="${flash.username}" />
		</p>
		<p id="password-field">
			<label for="password">&{'secure.password'}</label>
			<input type="password" name="password" id="password" value="" />
		</p>
		<p id="remember-field">
			<input type="checkbox" name="remember" id="remember" value="true" ${flash.remember ? 'checked="true"' : ''} />
			<label for="remember">&{'secure.remember'}</label>
		</p>
		<p id="signin-field">
			<input type="submit" id="signin" value="&{'secure.signin'}" />
		</p>
	#{/form}
	
<div class="container-box-login">

	<span id="container_tab_first" class="container-ui-button">
		<span id="button_tab_first" class="ga_login ui-button ui-button-tab disabled" rel="disabled">
			<span class="container-trigger">
				<a class="trigger trigger-tab">Log In</a>
			</span>
		</span>
	</span>

	<span id="container_tab_last" class="container-ui-button">
		<span id="button_tab_last" class="ga_login ui-button ui-button-tab">
			<span class="container-trigger">
				<a class="trigger trigger-tab">Register</a>
			</span>
		</span>
	</span>

	<div class="fieldset-default box-login">

		<div class="fieldset-inner fieldset-inner-user-front tab-content" style="display: block; ">
						
			<div class="container-fb-login-inner">
				<form action="/login" method="post" id="login">
<div class="field-elements">
	<h2 class="placeholder">Email</h2>
	<span class="container-input field-element">
		<input type="email" id="email" name="email" value="" maxlength="64" class="input-text" autocapitalize="off" autocorrect="off" placeholder="Email">
	</span>
	<span class="container-field-message field-element"></span>
</div>

<div class="field-elements">
	<div class="container-label">
		<h2 class="placeholder">Password</h2>
	</div>
	<span class="container-input field-element">
		<input type="password" id="password" name="password" value="" maxlength="64" class="input-text" autocapitalize="off" autocorrect="off" placeholder="Password">
	</span>
	<span class="container-field-message field-element"></span>
</div>

<div class="container-form-buttons field-elements">
	<div class="container-form-buttons-inner">
		<a id="button_forgot_password" class="button button-flat ga_login">Forgot Password?</a>
		<input type="submit" id="button_submit_login" name="submit" value="Log In" class="button button-alt button-submit ga_login">
	</div>
</div>
</form>
			</div>
		</div>

		<div class="fieldset-inner fieldset-inner-user-front tab-content hidden" style="display: none; ">
						<form action="/register" method="post" id="register">
<div class="field-elements">
	<h2 class="placeholder">First Name</h2>
	<span class="container-input field-element">
		<input type="text" id="first_name" name="first_name" value="" maxlength="64" class="input-text" placeholder="First name">
 <br>
	</span>
	<span class="container-field-message field-element"></span>
</div>

<div class="field-elements">
	<h2 class="placeholder">Last Name</h2>
	<span class="container-input field-element">
		<input type="text" id="last_name" name="last_name" value="" maxlength="64" class="input-text" placeholder="Last name">
 <br>
	</span>
	<span class="container-field-message field-element"></span>
</div>

<div class="field-elements">
	<h2 class="placeholder">Email</h2>
	<span class="container-input field-element">
		<input type="email" id="email" name="email" value="" maxlength="255" class="input-text" autocapitalize="off" autocorrect="off" placeholder="Email">
 <br>
	</span>
	<span class="container-field-message field-element"></span>
</div>

<div class="field-elements">
	<div class="container-label">
		<h2 class="placeholder">Password</h2>
		<span class="field-label-description">6 character minimum</span>
	</div>
	<span class="container-input field-element">
		<input type="password" id="password" name="password" value="" maxlength="64" class="input-text" autocapitalize="off" autocorrect="off" placeholder="Password (6 character minimum)">
 <br>
	</span>
	<span class="container-field-message field-element"></span>
</div>

<div class="container-form-buttons field-elements">
	<div class="container-form-buttons-inner">
		<input type="submit" id="button_submit_register" name="submit" value="Submit" class="button button-alt button-submit ga_login">
	</div>
</div>

</form>
		</div>
	</div>

	<div class="box-panel workspace-forgot-password">
		<!-- render the following div for the page to render the password panel on initial load -->
			</div>

</div>
</div>